<template>
<div class="container">
  <loading v-model="isShow" :text="loadText"></loading>


      <div class="" v-if="pageType==1">
        <x-header title="结算中心" class="vux-1px-b">
          <!-- <a @click="edit" slot="right">{{editType?'完成':'编辑'}}</a> -->
        </x-header>

        <div class="adress" @click="editAdress(2)" style="flex-flow: column nowrap;">
          <h2 class="flex">收货地址</h2>
          <p class="flex">{{ selectInfo.收件人 }}</p>
          <p class="flex">{{ selectInfo.phone }}</p>
          <p class="flex">{{ selectInfo.address }}</p>
          <x-icon type="ios-arrow-forward" class="arrow" size="15"></x-icon>
        </div>

        <div class="orderlist">
          <!-- <p class="ordertitle">
            <span style="font-weight:700">魅力惠直发</span>
            <span>预计2018年08月29日送达</span>
          </p> -->
          <div class="">
            <p class="ordergood vux-1px-b" v-for="(item, key) in cartList" :key="key">
              <span>
                <img :src="item.image" alt="">
              </span>
              <span style="text-align:left">
                <p style="font-size:12px; font-weight:bold">{{ item.name }}</p>
                <!-- <p>{{ item.goods.goods_remark }}</p> -->
                <p style="color:#999;font-size:12px;margin-top:10px;">规格：{{ item.规格名}}</p>
              </span>
              <span style="text-align:right">
                <p>￥{{ item.price }}</p>
                <p>x{{ item.num }}</p>
              </span>
            </p>
            <div class="goodsxj">
              <p>
                <span>商品小计</span>
                <span>￥{{ total }}</span>
              </p>
              <p>
                <span>优惠</span>
                <span>-￥{{ orderMoney }}</span>
              </p>
              <p style="margin-top:10px; font-weight:700;font-size:14px">
                <span>应付金额</span>
                <span>￥{{ total }}</span>
              </p>
            </div>
          </div>


        </div>


        <tabbar>
          <tabbar-item>
            <span slot="label" style="text-align: left;">
               <p style="font-weight:700;color:#000;font-size:14px;padding-top:8px">总价:￥{{ total }}</p>
               <p>已优惠：￥{{ orderMoney }}</p>
            </span>
          </tabbar-item>
          <tabbar-item>
            <span slot="label" @click="makeOrder()">
            立即支付
          </span>
          </tabbar-item>
        </tabbar>
      </div>

      <div class="" v-else-if="pageType==2">
        <x-header title="选择收货地址">
          <!-- <a @click="edit" slot="right">{{editType?'完成':'编辑'}}</a> -->
        </x-header>

        <checker v-model="checkedid" radio-required default-item-class="adree-item" selected-item-class="adree-item-selected" @on-change="selectAddress">
          <div class="adress" v-for="(item,index) in address" :key="index">
            <span class="list">
              <checker-item :value="index"></checker-item>
            </span>
            <span class="list">
              <p><span style="font-weight:bold; margin-right:20px;">{{ item.收件人 }}</span><span style="font-weight:bold;">{{ item.phone }}</span></p>
            <p style="font-size:12px; color:#999">
             {{ item.address }}</p>
            </span>
            <!-- <span class="list" @click="updateAddress(index)"></span> -->
          </div>

        </checker>

        <tabbar>
          <tabbar-item style="width:100%;padding:8px;background:#FFF;height:34px;">
            <span slot="label" style="text-align: center;">
               <p style="line-height:34px;background:#dd2828;color:#FFF;font-size:16px;" @click="editAdress(3)">添加新地址</p>
            </span>
          </tabbar-item>
        </tabbar>
      </div>

      <div class="" v-else-if="pageType==3">
        <x-header :title="addressTitle" >
          <!-- <a @click="edit" slot="right">{{editType?'完成':'编辑'}}</a> -->
        </x-header>


        <group class="adstyle">
          <x-input placeholder="收货人" v-model="addressInfo.consignee"></x-input>
          <x-input placeholder="手机号" v-model="addressInfo.mobile"></x-input>
          <!-- <x-address value-text-align="left" @click="doShowAddress" v-model="adressvalue" :list="addressData" title="" placeholder="所在地区" :show.sync="showAddress" @on-shadow-change="onShadowChange"></x-address> -->
          <x-input placeholder="详细地址" v-model="addressInfo.address"></x-input>
          <!-- <x-switch title="设为默认地址" style="padding-left:8px;font-size:12px;" v-model="adressM"></x-switch> -->
        </group>

			  <!-- <group class="deletead">
			    <p>删除收货地址</p>
			  </group> -->
        <tabbar>
          <tabbar-item style="width:100%;padding:8px;background:#FFF;height:34px;">
            <span slot="label" style="text-align: center;">
               <p style="line-height:34px;background:#dd2828;color:#FFF;font-size:16px;" @click="handle">保存</p>
            </span>
          </tabbar-item>
        </tabbar>
      </div>


</div>
</template>

<script>
import { getCartTwo, getUserAddress, addressSave, makeOrder } from '@/api/Goods'
import {
  XHeader,
  Loading,
  Tabbar,
  TabbarItem,
  ViewBox,
  Checker,
  CheckerItem,
  XAddress,
  ChinaAddressV2Data,
  XInput,
  Group,
  XSwitch,
  numberComma

} from 'vux'
export default {
  name: 'Goods',
  components: {
    XHeader,
    Loading,
    Tabbar,
    TabbarItem,
    ViewBox,
    Checker,
    CheckerItem,
    XAddress,
    ChinaAddressV2Data,
    XInput,
    Group,
    XSwitch,
    numberComma
  },
  data() {
    return {
      addressValue: true,
      isShow: false,
      loadText: 'Loading',
      pageType: 0,
      checkedid: 1,
      items1: [{
        key: '1',
        value: 1
      }, {
        key: '2',
        value: 2
      }, {
        key: '3',
        value: 3
      }],
      addressData: ChinaAddressV2Data,
      showAddress: false,
      adressvalue: [],
      adressM:false,
      cartList: [],
      total: null,
      orderMoney: null,
      address: [],
      addressTitle: '新建/编辑地址',
      addressInfo: {
        consignee: '',
        mobile: '',
        city: '',
        address: '',
        address_id: 0
      },
      temp:'',
      selectInfo: {
        consignee: '',
        mobile: '',
        address: ''
      },
      address_id: '0',
      //立即购买参数
      orderInfo: {
        action: '',
        goods_id: '',
        goods_num: '',
        item_id: '',
        discount: 0,
      },
      order_id: null,
      serverUrl: process.env.SERVER_URL,
      // serverUrl: 'http://admin.shop.com'
    }
  },
  mounted() {
    this.getUserAddress();
    this.order();
    this.pageType = this.$route.params.id;
    // this.order_id = this.$route.params.order_id
    this.order_id = this.$route.query.order_id;
    this.getCartTwo();  
  },
  created() {},
  methods: {
    // 立即购买 
    order() {
      this.orderInfo = {
        action: this.$route.query.action,
        goods_id: this.$route.query.goods_id,
        goods_num: this.$route.query.goods_num,
        item_id: this.$route.query.item_id,
        discount: this.$route.query.discount
      }
      console.log(this.orderInfo);
    },
    updateAddress(index) {
      this.addressInfo = this.address[index]

      this.adressvalue[0] = String(this.addressInfo.province)
      this.adressvalue[1] = String(this.addressInfo.city)
      this.adressvalue[2] = String(this.addressInfo.district)
     
      this.$router.push({
        name: 'Goodsorder',
        params: {
          id: 3
        }
      })
    },
    editAdress(id) {
      this.$router.push({
        name: 'Goodsorder',
        params: {
          id: id
        }
      })
    },
    doShowAddress() {
      this.showAddress = true
    },
    getCartTwo() {
      this.isShow = true
      console.log(this.$route.query.order_id);
      getCartTwo({ a: 'productOrder', orderId: this.$route.query.order_id }).then(response => {
        this.cartList = response.详情
        this.total = numberComma(response.总价)
        this.orderMoney = numberComma(response.应收)
        // this.selectInfo = this.address[0]
        // this.address_id = this.address[0]['address_id']
        this.isShow = false
      });
    },
    // 获取收货地址
    getUserAddress() {
      this.isShow = true
      getUserAddress({a: 'userAddressList' }).then(response => {
        this.isShow = false
        if (response.length < 1) {
          this.$router.push({
            name: 'Goodsorder',
            params: {
              id: 3
            }
          })
        }
        this.address = response
        this.selectInfo = this.address[0]
        this.address_id = this.address[0]['id']
      });
    },
    // 保存收货地址
    handle() {
      this.isShow = true;
      // console.log(this.addressInfo.address);
      // this.addressInfo.province = this.adressvalue[0]
      // this.addressInfo.city = this.adressvalue[1]
      // this.addressInfo.district = this.adressvalue[2]
      // this.addressInfo.address = this.temp + this.addressInfo.address
      var param = {
        a: 'addAddress',
        username: this.addressInfo.consignee,
        phone: this.addressInfo.mobile,
        address: this.addressInfo.address
      }
      addressSave(param).then(response => {
        this.getUserAddress()
        this.$router.push({
            name: 'Goodsorder',
            params: {
              id: 2
            }
          })
        this.isShow = false;
      });
    },
    // 获取选择的收获地址
    onShadowChange(id, name) {
      this.temp = ''
      for (const i in name) {
        this.temp += name[i] + ' '
      }
    },
    // 选择收货地址
    selectAddress() {
      this.selectInfo.收件人 = this.address[this.checkedid].收件人;
      this.selectInfo.phone = this.address[this.checkedid].phone;
      this.selectInfo.address = this.address[this.checkedid].address;
      this.address_id = this.address[this.checkedid]['id']
      this.$router.push({
						name: 'Goodsorder',
						params: {
							id: 1,
							page: 1
						}
					})
    },
    // 点击提交订单生成订单操作
    makeOrder() {
      this.isShow = true;
      var param = this.orderInfo
          param.address_id = this.address_id
          param.act = 'submit_order'
      if (this.orderInfo.action != 'buy_now') {
        param.invoice_title = '个人'
        param.auth_code = 'TPSHOP'
        param.act = 'submit_order'
      }

      var params = {
        a: 'finishOrder',
        orderId: this.order_id,
        addressId: this.address_id
      }
      
      makeOrder(params).then(response => {
        console.log(response);

        // if (response.result > 0) {
        //   window.location.href = this.serverUrl + '/index.php/mobile/Payment/getCode?order_id=' + response.result + '&openid=' + sessionStorage.getItem('openid')
        // }
        // // console.log(this.serverUrl + '/index.php/mobile/Payment/getPay?order_id=' + response.result + '&openid=' + sessionStorage.getItem('openid'))
        if (response == 'success') {
          alert('success')
          window.location.href = '/'
        } else {
          window.location.href = response
        }
        
        this.isShow = false;
      })
    }
  },
  watch: {
    $route: function(e) {
      this.pageType = e.params.id;
    }
  }

}
</script>

<style lang="less" scoped>
* {
    touch-action: none;
}
.vux-x-switch .weui-label{
	color: #000;
}

.deletead p{
	line-height: 40px;
	text-align: left;
	padding-left: 15px;
	font-size: 12px;
	color: #DD2828;
}

.weui-input,.vux-cell-value,.vux-popup-picker-placeholder{
  font-size: 12px!important;
  color: #999!important;
  height:24px!important;
}
.orderlist {
    width: 85%;
    padding: 15px;
    margin: 0 auto 4%;
    background: #FFF;
}

.ordertitle {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    font-size: 14px;
}
.ordergood {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 10px 0;
}
.ordergood span:nth-child(1) {
    width: 20%;
    flex: 0 1 auto;
}
.ordergood span img {
    width: 100%;
}
.ordergood span:nth-child(2) {
    width: 50%;
    flex: 0 1 auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    padding-left: 10px;
    font-size: 14px;
}
.ordergood span:nth-child(2) p:nth-child(2) {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.ordergood span:nth-child(3) {
    width: 30%;
    flex: 0 1 auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.ordergood span:nth-child(3) p {
    line-height: 30px;
}

.goodsxj {
    padding-top: 10px;
}
.goodsxj p {
    display: flex;
    justify-content: space-between;
    line-height: 24px;
}

.container .weui-tabbar {
    position: fixed;
    font-size: 14px;
}
.container {
    height: 100%;
    padding-bottom: 60px;
}

.adress {
    width: 85%;
    padding: 10px 15px;
    text-align: left;
    line-height: 22px;
    background: #FFF;
    margin: 4% auto;
    font-size: 14px;
    position: relative;
}
.adress .flex{
	flex: 0 1 auto;
}
.adress .arrow {
    position: absolute;
    right: 2%;
    top: 50%;
    margin-top: -1%;
}
.adress h2 {
    font-size: 14px;
    padding-bottom: 10px;
}

.adree-item {
    width: 15px;
    height: 15px;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-right: 6px;
}
.adree-item-selected {
    background: #000;
}
.adress {
    display: flex;
    justify-content: space-between;
}
.adress .list:nth-child(1) {
    width: 12%;
    flex: 0 1 auto;
    align-self: center;
    display: flex;
}
.adress .list:nth-child(2) {
	  width: 78%;
    flex: 1 1 auto;
}
.adress .list:nth-child(3) {
    width: 10%;
    flex: 0 1 auto;
    background: url("images/edit.png") no-repeat center;
    background-size: 50% auto;
}

.adree-name {
    width: 100%;
    height: 40px;
}
.weui-tabbar {
    height: 50px;
    background: #FFF;
}

.container .weui-tabbar a:nth-child(1) {
    width: 70%;
    flex: 0 1 auto;
    padding-left: 10px;
}
.container .weui-tabbar a:nth-child(1) p {
    line-height: 18px;
    color: #666;
    font-size: 12px;
}

.container .weui-tabbar a:nth-child(2) {
    flex: 1 1 auto;
    background: #DD2828;
}
.container .weui-tabbar a:nth-child(2) span {
    color: #FFF;
}

.weui-cells {
  margin-top: 0!important;
}


</style>
